<template>
  <div class="merchandise-management views-container">
    <div class="wlm-table">
      <div class="subscribe">
        <div class="wlm-table-hearder-btn">
          <el-button type="primary" @click="installbtn">批量设置</el-button>
          <el-button @click="clear">清除库存</el-button>
        </div>
        <div>
          <el-button @click="front">
            <i class="el-icon-arrow-left"></i>
            前10天
          </el-button>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            @change="changebtn"
            value-format="timestamp"
          >
          </el-date-picker>
          <el-button @click="after">
            后10天
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>
      <!-- <div style="color:red;">核销时间段 2020-04-27 14:28:34 —— 2020-07-26 14:28:34，预约时间请设置核销时间段内，否则用户预约后无法核销</div> -->
      <el-table
        border
        style="width: 100%"
        :data="ticketList"
        @selection-change="handleSelectionChange"

      >
        <el-table-column
          type="selection"
          prop="date"
          width="55"
        >
        </el-table-column>
        <el-table-column
          label="商品名"
          align="center"
          width="566"
        >
        <template slot-scope="scope">
          {{scope.row.title || scope.row.goods_name}}
        </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in dateAll"
          :key="index"
          align="center"
        >
          <template
            slot="header"
            slot-scope="scope"
          >
            {{item.date + item.text}}
          </template>
          <template slot-scope="scope">
            <div @click="scopebtn(scope.row,item.date_str,item.date)">
              {{!!scope.row.list[item.date_str] ? scope.row.list[item.date_str].kucun : '-'}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 单元格模态框 -->
    <el-dialog
      title="预约设置"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="tablerow">
        <el-form-item
          label="商品名"
          :label-width="formLabelWidth"
        >
          <div>{{tablerow.title || tablerow.goods_name}}</div>
        </el-form-item>
        <el-form-item
          label="日期"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="tablerow.date"
            type="date"
            placeholder="选择日期"
            :disabled="true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="库存"
          :label-width="formLabelWidth"
        >
          <el-input-number
            :min="0"
            :controls="false"
            autocomplete="off"
            v-model='tablerow.kucun'
          ></el-input-number>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display:flex;justify-content: space-between;">
        <div>
           <el-button @click="stock">清除库存</el-button>
        </div>
        <div>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submits">确 定</el-button></div>
      </div>
    </el-dialog>

    <!-- 批量设置模态框 -->
  <el-dialog title="批量设置" :visible.sync="dialogTableVisible" class="motail">
  <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm">
    <!-- 日期 -->
    <el-form-item label="日期" :label-width="formLabelWidth" prop="value2">
      <el-date-picker
style="width:360px;"
v-model="formData.value2"
:default-time="[`${`${new Date().getHours()}`.padStart(2,'0')}:${`${new Date().getMinutes()+2}`.padStart(2,'0')}:00`,'23:59:59']"
       value-format="timestamp"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
        </el-date-picker>
    </el-form-item>
    <!-- 日期方式 -->
    <el-form-item label="日期方式" :label-width="formLabelWidth">
      <el-radio-group v-model="formData.radio">
          <el-radio :label="'all'">全部</el-radio>
          <el-radio :label="'price_week'">指定星期</el-radio>
          <el-radio :label="'price_day'">指定日期</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="选择星期" :label-width="formLabelWidth" v-if="formData.radio=='price_week'" prop="week">
        <el-checkbox-group v-model="formData.week" >
           <el-checkbox v-for="day in days" :label="day.label" :key="day.label" border size="mini">{{day.title}}</el-checkbox>
        </el-checkbox-group>
    </el-form-item>
    <el-form-item label="选择日期" :label-width="formLabelWidth" v-if="formData.radio=='price_day'" prop="checkLists">
        <el-checkbox-group v-model="formData.checkLists">
          <el-checkbox v-for="(item,index) in scheduledate" :key="index"  :label="item" border size="mini" >{{item.title}}</el-checkbox>
        </el-checkbox-group>
    </el-form-item>

    <!-- 表格数据 -->
    <el-form-item>
     <el-table style="width: 100%" :data="formData.tabledata">
      <el-table-column  label="名称">
        <template slot-scope="scope">
          <!-- {{scope.row.title || scope.row.goods_name}} -->
          <el-input disabled v-model="scope.row.title" v-if="scope.row.title"></el-input>
          <el-input disabled v-model="scope.row.goods_name" v-if="scope.row.goods_name"></el-input>
        </template>
      </el-table-column>
      <el-table-column  label="库存">
        <template slot-scope="scope">
          <el-input v-model="scope.row.kucun"></el-input>
        </template>
      </el-table-column>
    </el-table>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="batchbtn(formData)">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>
<script>
import {
  getGoodsReservation,
  wayReservation,
  clearStock
} from '@/api/merchandise'
import dayjs from 'dayjs'
export default {
  name: 'ListTable',
  data() {
    // let time = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
    let time = +dayjs(dayjs().format('YYYY-MM-DD 00:00'))
    // console.log("time+++++++++++++++",time)
    return {
      type: '',
      dateAll: [],
      ticketList: [],
      // noweek:'',
      goods_id: this.$route.query.goods_id, // 商品ID
      is_reservation: this.$route.query.is_reservation, // 是否为预约商品
      spec_type: this.$route.query.spec_type, // 商品规格 10单20多
      value1: time,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      tablecolumn: '',
      tablerow: {},
      dayTime: '',
      selected: [],
      scheduledate: [
        {
          title: '1',
          label: '0'
        }, {
          title: '2',
          label: '1'
        },
        {
          title: '3',
          label: '2'
        },
        {
          title: '4',
          label: '3'
        }, {
          title: '5',
          label: '4'
        }, {
          title: '6',
          label: '5'
        }, {
          title: '7',
          label: '6'
        }, {
          title: '8',
          label: '7'
        }, {
          title: '9',
          label: '8'
        }, {
          title: '10',
          label: '9'
        }, {
          title: '11',
          label: '10'
        }, {
          title: '12',
          label: '11'
        }, {
          title: '13',
          label: '12'
        }, {
          title: '14',
          label: '13'
        }, {
          title: '15',
          label: '14'
        }, {
          title: '16',
          label: '15'
        }, {
          title: '17',
          label: '16'
        }, {
          title: '18',
          label: '17'
        }, {
          title: '19',
          label: '18'
        }, {
          title: '20',
          label: '19'
        }, {
          title: '21',
          label: '20'
        }, {
          title: '22',
          label: '21'
        }, {
          title: '23',
          label: '22'
        }, {
          title: '24',
          label: '23'
        }, {
          title: '25',
          label: '24'
        }, {
          title: '26',
          label: '25'
        }, {
          title: '27',
          label: '26'
        }, {
          title: '28',
          label: '27'
        }, {
          title: '29',
          label: '28'
        }, {
          title: '30',
          label: '29'
        }, {
          title: '31',
          label: '30'
        }

      ],
      days: [{
        title: '星期一',
        label: '1'
      }, {
        title: '星期二',
        label: '2'
      }, {
        title: '星期三',
        label: '3'
      }, {
        title: '星期四',
        label: '4'
      }, {
        title: '星期五',
        label: '5'
      }, {
        title: '星期六',
        label: '6'
      }, {
        title: '星期天',
        label: '0'
      }],

      formData: {
        value2: '',
        radio: 'all',
        checked1: true,
        checked2: false,
        week: [],
        checkLists: [],
        tabledata: []

      },
      rules: {
        value2: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
        week: [{ required: true, message: '至少选择一项', trigger: 'change' }],
        checkLists: [{ required: true, message: '至少选择一项', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getTableData()
    this.getDays()
  },
  watch:{
    value1:{
      handler(val) {
      console.log('value1',val)
    },
    immediate: true
    }
  },
  methods: {
    changebtn() {
      //  let time123 =  new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()
      //      time123  =  new Date(time123).getTime()
      //      this.value1 = time123
      //      console.log("this.value2222222222222222",this.value1)
      this.getDays()
      this.getTableData()
    },
    getTableData() {
      getGoodsReservation({
        goods_id: this.goods_id,
        is_reservation: this.is_reservation,
        spec_type: this.spec_type,
        ymd: this.value1 }).then(res => {
        const {
          data: {
            data: {
              ticket_list: ticket_list = []
            }
          }
        } = res
        this.ticketList = ticket_list
        this.dateAll.map((value, index) => {

        })
      })
    },
    scopebtn(row, date_str, date) { // 点击每个单元格
    // console.log("999999999999999999999",row,date_str,date)
      this.dialogFormVisible = true
      this.price_radio = 'one_day'
      this.tablerow.title = row.title
      this.tablerow.goods_name = row.goods_name
      this.tablerow.spec_sku_id = row.spec_sku_id
      this.tablerow.date = date
      this.tablerow.date_str = date_str
      this.tablerow.ymd_c = row.list[date_str] ? row.list[date_str].ymd_c : ''
      this.tablerow.kucun = row.list[date_str] ? row.list[date_str].kucun : 0
      this.tablerow.id = row.list[date_str] ? row.list[date_str].id : []
      // console.log('dfsdddddddddddddddddddddddddd', row, date_str, date)
    },
    // 前10天
    front() {
      const times = new Date(this.value1)
      this.value1 = times.setDate(times.getDate() - 10)
      // console.log("this.value11111",this.value1)
      this.getDays()
      this.getTableData()
    },
    // 后十天
    after() {
      // this.value1 = new Date(this.value1.setDate(this.value1.getDate() + 10))
      const times = new Date(this.value1)
      this.value1 = times.setDate(times.getDate() + 10)
      this.getDays()
      this.getTableData()
    },
    getDays() {
      this.dateAll = []
      for (let i = 0; i <= 9; i++) {
        const ss = 24 * 60 * 60 * 1000 // 一天的毫秒数86400
        const timestamp = new Date(this.value1).getTime() // 获取当前时间戳
        console.log("55555555555555555",timestamp)
        const date1 = new Date(ss * i + timestamp) // 加上n天的国际标准日期
        console.log("66666+++++++++++",date1)
        const newTime = date1.toLocaleString() // 把日期转换成
        const wk = date1.getDay()
        const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        const week = weeks[wk]
        const arr = newTime.split(' ') // 把2020-05-08提取出来
        const arr2 = arr[0].split('/') // 把年月日数字单独提出来
        if (arr2[1] < 10) {
          arr2[1] = '0' + arr2[1]
        }
        if (arr2[2] < 10) {
          arr2[2] = '0' + arr2[2]
        }
        this.dateAll.push(Object.assign({ date: arr2[0] + '-' + arr2[1] + '-' + arr2[2], text: week, date_str: arr2[0] + arr2[1] + arr2[2] }))
      }
    },
    formDatas() {
      const dt = new Date(this.value1)
      // console.log(dt,"55555555555555")
      const Y = dt.getFullYear() + '-'
      const M = (dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth + 1) + '-'
      const D = dt.getDate() + ''
      return Y + M + D
    },
    submits() { // 预约设置确定
      this.dialogFormVisible = false
      // console.log("44445555556666",this.tablerow.ymd_c)
      wayReservation({
        price_radio: this.price_radio,
        ymd: this.tablerow.date_str,
        ymd_c: this.tablerow.ymd_c,
        goods_id: this.goods_id,
        spec_sku_id: this.tablerow.spec_sku_id,
        kucun: this.tablerow.kucun,
        id: this.tablerow.id
      }).then(res => {
        if (res.data.code === 1) {
          this.getTableData()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      })
    },
    stock() { // 预约设置清除库存
      this.type = 'single'
      console.log("99999999999999999", this.tablerow.spec_sku_id)
      const date = {
        type: this.type,
        goods_id: this.goods_id,
        attr_id: !!this.tablerow.spec_sku_id?this.tablerow.spec_sku_id:0,
        ymd: this.tablerow.date_str
      }
      this.$confirm('此操作将删除该商品所有库存, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearStock(date).then((res) => {
          if (res.data.code === 1) {
            this.getTableData()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogFormVisible = false
          }
        })
      }).catch(() => {

      })
    },
    installbtn() {
      this.selected.map((item, index) => {
        this.$set(item, 'kucun', '')// 强制加键名，否则input框无法输入
      })
      this.formData.tabledata = this.selected
      console.log('this.selected', this.formData.tabledata)

      if (this.selected.length > 0) {
        this.dialogTableVisible = true
      } else {
        this.$message.error('至少勾选一个商品!')
      }
    },
    handleSelectionChange(row) {
      this.selected = row
    },
    batchbtn(formData) { // 批量设置确认按钮
      console.log('this.value2', this.selected)
      console.log('this.formData', this.formData.value2)
      const sku = []
      this.selected.map((value, index) => {
        console.log('va', value)
        const item = {
          spec_sku_id: value.spec_sku_id,
          kucun: value.kucun,
          title: value.title
        }
        sku.push(item)
      })
      const day = this.formData.checkLists.map(item => { return item.title })
      const data = {
        goods_id: this.goods_id,
        price_radio: this.formData.radio,
        time: this.formData.value2,
        week: this.formData.week,
        price_day: day,
        sku: sku
      }
      console.log('dadsdasdas', data)

      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.dialogTableVisible = false
          wayReservation(data).then((res) => {
            if (res.data.code === 1) {
              this.getTableData()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    clear() { // 清楚库存
      this.type = 'all'
      const a = this.selected.map(item => {
         return item.spec_sku_id })
      const data = {
        goods_id: this.goods_id,
        type: this.type,
        attr_id: this.$route.query.spec_type==10?0:a
      }
      this.$confirm('此操作将删除该商品所有库存, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearStock(data).then((res) => {
          if (res.data.code === 1) {
            this.getTableData()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.subscribe {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-table__header thead.has-gutter tr th{
    background: #fff !important;
}
.motail{
  /deep/ .el-checkbox__input{
           display: none;
}
  /deep/ .el-checkbox.is-bordered{
    margin:0px 1px 0px 10px;
  }
  /deep/ .el-checkbox.is-bordered+.el-checkbox.is-bordered{
    margin-right: 0px;
  }

}

</style>
